<!--
 * @Author: your name
 * @Date: 2021-03-10 22:13:39
 * @LastEditTime: 2021-03-11 16:57:33
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \jet_mesc:\js\jinma_qms\src\components\YearInput.vue
-->
<template>
  <q-input
    v-model="field.value"
    filled
    mask="####"
    :label="field.label"
    lazy-rules
    :rules="field.rules?field.rules:null"
    bottom-slots
    ref="input"
  >
    <template v-slot:append>
      <q-icon
        name="event"
        class="cursor-pointer"
      >
        <q-popup-proxy
          ref="qYearProxy"
          transition-show="scale"
          transition-hide="scale"
        >
          <yearpicker color="primary" v-model="field.value" />
        </q-popup-proxy>
      </q-icon>
    </template>

    <template v-slot:hint v-if="field.hint || field.compare">
      <div class="text-bold text-white bg-yellow-10" style="padding: 1px;" v-if="canShowCompare">
        {{field.compare.label ? field.compare.label + '：' : ''}}{{field.compare.map ? field.compare.map.value : field.compare.value}}
      </div>
      <div v-if="field.hint">{{field.hint}}</div>
    </template>
  </q-input>
</template>
<script>
import { defineComponent } from 'vue';
import yearpicker from 'src/components/YearPicker.vue';

export default defineComponent({
  name: 'yearinput',
  components: {
    yearpicker
  },
  props: {
    field: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    const self = this;
    return {

    }
  },
  methods: {

  },
  watch: {
    'field.value' (val) {
      this.$refs.qYearProxy.hide();
    }
  },
  computed: {
    canShowCompare () {
      /*
        compare的值
        compare: {
          label, // 标题
          value, // 对比的值
          always // true-有数据就显示 false-值不同，再显示
        } */
      return this.field.compare && this.field.compare.value !== null && (this.field.compare.always || this.field.compare.value != this.field.value);
    }
  }
});
</script>
